<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="通道组" prop="userName">
        <el-select v-model="queryParams.channelGroupId" placeholder="请选择通道组" @change="channelGroupChange" clearable>
          <el-option :label="item.groupName" :value="item.id" v-for="(item, i) in channelGroup" :key="i"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通道" prop="userName">
        <el-select v-model="queryParams.channelId" placeholder="请选择通道" clearable>
          <el-option :label="item.channelName" :value="item.channelId" v-for="(item, i) in channelCondition"
            :key="i"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通道状态" prop="userName">
        <el-select v-model="queryParams.channelStatus" placeholder="请选择通道状态">
          <el-option :label="item.label" :value="item.value" v-for="(item, i) in channelStatusOption"
            :key="i"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <nu-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</nu-button>
        <nu-button icon="el-icon-refresh" size="mini" @click="resetQuery">清除</nu-button>
      </el-form-item>
    </el-form>

    <el-row class="mb8" v-if="isTextDetail">
      <span class="searchDetail">查询时间段内，{{ textDetail.belongGroupName }}的{{ textDetail.channelName }}在线时长共为<span
          class="ft-20">{{ textDetail.onlineTime }}h</span>，占比<span class="ft-20">{{ textDetail.onlinerate
          }}%</span>，离线时长为<span class="ft-20">{{ textDetail.offlineDuration }}h</span>，占比<span class="ft-20">{{
  textDetail.offlinerate }}%。</span></span>
    </el-row>

    <el-table ref="tables" v-loading="loading" :data="list" height="calc(100% - 200px)">
      <el-table-column label="通道组" align="center" prop="belongGroupName" :show-overflow-tooltip="true" />
      <el-table-column label="通道名称" align="center" prop="channelName" :show-overflow-tooltip="true" />
      <el-table-column label="通道状态" align="center" prop="channelStatus" >
        <template slot-scope="scope">
          <span>{{ scope.row.channelStatus == 0 ? '在线' : '离线' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="onoffTime" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.onoffTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getChannelsOnOffLogs" />
  </div>
</template>

<script>
import nuButton from "@/components/base/button"
import { getDateTime } from "@/utils/ruoyi";
export default {
  name: "Logininfor",
  dicts: ['sys_common_status'],
  components: { nuButton },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: { prop: 'loginTime', order: 'descending' },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        channelGroupId: '',
        channelId: '',
      },
      channelGroup: [],
      channelCondition: [],
      channelConditionMap: [],
      channelStatusOption:[{label:'在线',value:0},{label:'离线',value:1}],
      textDetail: {},
      isTextDetail: false
    };
  },
  created() { },
  mounted() {
    this.dateRange = [getDateTime("day") + " 00:00:00", getDateTime("day") + " 23:59:59"]
    this.getChannelGroupSet()
    this.getChannelCondition()
    this.getChannelsOnOffLogs()
  },
  methods: {
    /** [通道投退]查询通道在线、离线时间统计 */
    getChannelsOnOff() {
      this.isTextDetail = false
      let postData = {
        ...this.queryParams,
        startDay: this.dateRange?.length ? this.dateRange[0] : '',
        endDay: this.dateRange?.length ? this.dateRange[1] : ''
      };
      this.$httpGet(window.api.getChannelsOnOff, postData).then(res => {
        if (res.code == 200 && res.rows) {
          if (res.rows?.length && res.rows.length == 1 && this.queryParams.channelId) {
            this.isTextDetail = true
            let d = res.rows[0]
            this.textDetail = {
              channelName: d.channelName,
              belongGroupName: d.belongGroupName,
              offlineDuration: Math.round(d.offlineDuration / 60 / 60 * 100) / 100,
              onlineTime: Math.round(d.onlineDuration / 60 / 60 * 100) / 100,
              onlinerate: d.isOnline ? (d.rate * 100).toFixed(2) : ((1 - d.rate) * 100).toFixed(2),
              offlinerate: d.isOnline ? Math.round((1 - d.rate) * 100 * 100) / 100 : Math.round(d.rate * 100 * 100) / 100
            }
          }
        } else {
        }
      }).catch(err => {

      });
    },
    /**
     * 查询日志列表
     */
    getChannelsOnOffLogs() {
      this.loading = true;
      this.isTextDetail = false
      let postData = {
        ...this.queryParams,
        ...this.pagination,
        startDay: this.dateRange?.length ? this.dateRange[0] : '',
        endDay: this.dateRange?.length ? this.dateRange[1] : ''
      };
      this.$httpGet(window.api.getChannelsOnOffLogs, postData).then(res => {
        if (res.code == 200 && res.rows) {
          this.total = res.total;
          this.list = res.rows;
          this.loading = false;
          if (res.rows?.length && res.rows.length == 1 && this.queryParams.channelId) {
            this.isTextDetail = true
            let d = res.rows[0]
            this.textDetail = {
              channelName: d.channelName,
              belongGroupName: d.belongGroupName,
              offlineDuration: Math.round(d.offlineDuration / 60 / 60 * 100) / 100,
              onlineTime: Math.round(d.onlineDuration / 60 / 60 * 100) / 100,
              onlinerate: d.isOnline ? (d.rate * 100).toFixed(2) : ((1 - d.rate) * 100).toFixed(2),
              offlinerate: d.isOnline ? Math.round((1 - d.rate) * 100 * 100) / 100 : Math.round(d.rate * 100 * 100) / 100
            }
          }
        } else {
        }
      }).catch(err => {

      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getChannelsOnOffLogs()
      if (this.queryParams.channelId) {
        this.getChannelsOnOff();
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      // this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.queryParams.channelGroupId = ''
      this.queryParams.channelId = ''
      this.queryParams.channelStatus = ''
      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
    },
    /**
     * 通道组change
     * @param {*} val 
     */
    channelGroupChange(val) {
      this.channelCondition = this.channelConditionMap.filter(item => item.belongGroupId == val)
      this.queryParams.channelId = ''

    },
    /**
   * 获取通道组列表
   */
    getChannelGroupSet() {
      let postData = {
        pageSize: 9999,
        pageNum: 1,
      };
      this.$httpGet(window.api.getChannelGroupSet, postData).then(res => {
        if (res.code == 200 && res.rows) {
          this.channelGroup = res.rows

        } else {
        }
      }).catch(err => {

      });
    },
    /**
     * 获取通道
     */
    getChannelCondition() {
      let postData = {
        pageSize: 9999,
        pageNum: 1,
        channelName: ""
      };
      this.$httpGet(window.api.getChannelCondition, postData).then(res => {
        if (res.code == 200 && res.rows) {
          this.channelCondition = []
          this.channelConditionMap = res.rows
        } else {
        }
      }).catch(err => {

      });
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%
}
.searchDetail {
  color: #108EE9;
  font-size: 13px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
}

.ft-20 {
  font-size: 20px;
}
</style>

